<template>
  <view>
    <login-container title="注册账号" button-text="注册" @submit="register">
      <view class="margin-top-40">
        <view v-for="(val,key) in formList" :key="key" :class="{'margin-bottom-16':key===2}" class="input-box margin-bottom-56 flex-row align-center">
          <input
            v-model="form[val.attr]"
            class="text-32 color-t1 flex-item"
            placeholder-class="color-t3"
            :type="val.type"
            :placeholder="val.placeholder"
            :maxlength="val.maxLength"
            :password="val.attr==='password'&&!showPassword"
          >
          <view v-if="key===1" class="margin-left-10">
            <get-code check :code-from="form.codeFrom" :phone="form.phone" />
          </view>

          <view v-if="key===2" class="padding-10" @click="showPassword = !showPassword">
            <text :class="showPassword?'tbb-yanjing1':'tbb-yanjing'" class="text-32 color-t1" />
          </view>
        </view>
        <text class="text-20 color-t3">输入6-30位由字母、数字和符号两种及以上的组合密码</text>
      </view>
    </login-container>
    <view class="text-center">
      <text class="text-28 color-t3">已有账号？</text>
      <text class="text-28 color-primary" @click="jump('/passport/password-login/password-login','redirectTo')">去登录</text>
    </view>
  </view>
</template>

<script>
import LoginContainer from '../components/login-container/login-container'
import { mapGetters } from 'vuex'
import { formVerify } from '@/common/util'
import { encryption } from '../index'
import { registerV2 } from '../api'
export default {
  name: 'Register',
  components: {
    LoginContainer
  },
  data() {
    return {
      form: {
        phone: '',
        password: '',
        code: '',
        identityTypes: ['autoCompany'],
        codeFrom: 'register',
        loginType: ''
      },
      formList: [
        { attr: 'phone', placeholder: '手机号', type: 'digit', maxLength: 11, must: true, test: 'mobile' },
        { attr: 'code', placeholder: '验证码', type: 'digit', maxLength: 4, must: true },
        { attr: 'password', placeholder: '密码', type: 'text', maxLength: 30, must: true, test: 'detectPassword', min: 6 }
      ],
      showPassword: false
    }
  },
  computed: {
    ...mapGetters({
      oauth: 'oauth'
    })
  },
  methods: {
    async register() {
      if (formVerify(this.form, this.formList)) {
        this.form.loginType = this.oauth
        const user = encryption({
          data: this.form,
          key: '1234567887654321',
          param: ['password']
        })
        const [err, res] = await registerV2(user)
        if (!this.$http.errorCheck(err, res)) return false
        return this.login.login('/auth/login/v2/password/token', {
          phone: user.phone,
          password: user.password,
          identityTypes: user.identityTypes,
          loginType: user.loginType
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../login";
</style>
